<template>
    <!-- 商品详情 -->
    <div class="product-view">
        <!-- 导航 -->
        <van-sticky>
            <base-nav :showRight="true" title="商品详情"></base-nav>
        </van-sticky>
        <!-- 轮播图 -->
        <van-swipe 
		 class="my-swipe" 
		 :autoplay="3000" 
		>
		  <van-swipe-item v-for="item in bannerList" :key="item">
				<van-image
				  :src="item"
				/>
			</van-swipe-item>
		</van-swipe>

        <!-- 商品标题 -->
        <div class="text">
            <p>{{ nowGoods.goods_name }}</p>
            <div>
                <img src="https://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/33/33001.png">
                <p>{{ nowGoods.star_number }}</p>
            </div>
        </div>
        <!-- 商品描述 -->
        <div class="text-com">
            <p><van-text-ellipsis :content="recommend" /></p>
        </div>
        <!-- 商品价格 -->
       <p class="price">￥{{ nowGoods.price }}</p>
       <!-- 正品保障 -->
       <p class="tan">
        <img src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/29/29895.png" alt="">
        免运费
        <img class="sc" src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/29/29893.png" alt="">
        正品授权
       </p>
       <p class="tan">
         <img src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/29/29894.png" alt="">
          现货商品3个工作日内发货
       </p>
      <!-- 选择颜色 -->
       <van-cell title="选择颜色、尺码、数量" is-link  icon="completed-o"  @click="show = true;cat = true"/>
       <van-cell :title="nowGoods.brand_name" is-link  icon="shop-o"/>
         <!-- 底部 -->
    <van-action-bar>
        <van-action-bar-icon icon="service-o" text="客服" color="#000" />

        <van-action-bar-button style="border: 1px solid #000 ;border-radius: 0%;" text="加入购物车"  @click="clickAddBuyHandler('add'); cat = false"/>
        <van-action-bar-button style="border-radius: 0%;" color="#000" text="立即购买"   @click="clickAddBuyHandler('buy');cat = false"/>
    </van-action-bar>

    <!-- 弹出框 -->
    <van-action-sheet v-model:show="show" title="  ">
        <div class="content">
            <!-- 商品标题 -->
            <div class="text-action">
                <p>{{ nowGoods.goods_name }}</p>
            
            </div>
            <!-- 商品描述 -->
            <div class="text-com">
                <p><van-text-ellipsis :content="recommend" /></p>
            </div>
            <!-- 商品价格 -->
            <p class="price">￥{{ nowGoods.price }}</p>


            <van-cell value="颜色" >
            <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                    <!-- <van-tag  type="primary">{{ nowGoods.goods_name }}</van-tag> -->
                    <van-image
                        style="border:1px solid #000;"
                        width="60"
                        height="60"
                        :src="bannerList[0]"
                        />
                </template>
            </van-cell>

            <!-- 步进器 -->
            <div class="sum">
                <van-stepper v-model="goodsNumber" min="1" max="10" disable-input/>
            </div>
            

            
        </div>
          <!-- 底部按钮 -->
          <van-action-bar>
                <van-action-bar-button v-if="cat" style="border: 1px solid #000 ;border-radius: 0%;" text="加入购物车" @click=" clickConfirmHandler('add')"/>
                <van-action-bar-button v-if="cat" style="border-radius: 0%;" color="#000" text="立即购买"  @click=" clickConfirmHandler('buy')"/>
                <van-action-bar-button v-if="!cat" style="border-radius: 0%;" color="#000" text="确定" @click="clickConfirmHandler"/>
          </van-action-bar>
        
    </van-action-sheet>


        <div class="buyproduct" >
            <div class="product-c" :style="productCStyle" @click="productC">商品详情</div>
            <div class="buy-c" :style="buyCStyle" @click="buyC">购买需知</div>
        </div>
       <!-- 商品图片 -->
       <div class="product-banner" v-show="aver">
			<img v-for="item in ProdcutList" :src="item" :kye="item">
		</div>

        <div class="Purchasing-notice" v-show="!aver">
            <p>— 所有商品均为正品保证。</p>
            <p>— 中国大陆地区免运费 （偏远地区、受疫情和自然灾害影响、受节假日特殊活动等影响时，需承担部分运费)。</p>
            <p>— 包邮默认商家合作快递，如指定快递请联系客服，并承担运费差额。</p>
            <p>— 蜡烛、液态品、手表等含电池产品无法空运，运输时间相较普通空运件会更久。</p>
            <p>— 如出现产品质量问题请在签收后72小时内联系客服。</p>
        
        </div>
        
        <!-- 猜你喜欢 -->
        <van-divider
          :style="{ color: '#000', borderColor: '#000', padding: '0 16px' }"
        >
          猜你喜欢
        </van-divider>
        <div class="goods-list">
            
            <goods v-for="item in likeList" :goods="item" :key="item.goods_id"></goods>
        </div>
        <!-- 回到顶部组件 -->
        <van-back-top class="custom" bottom="7vh"/>
    </div>
</template>
<script setup lang="ts">

    import { ref, watch } from 'vue';
    import API from '../api'
    import { useUserStore } from '../store';
    // 路由
    let route = useRoute();
    let router = useRouter();

    let userStore = useUserStore();
    // 商品数据
    let nowGoods = ref({});
    // 背景图
	let bannerList = ref([]);
	let ProdcutList = ref([]);
    // 猜你喜欢
    let likeList = ref([]);
    // 描述
    let recommend = ref('');

    let show = ref(false)
    let cat = ref(true)

    //状态变量 add | buy
	let nowStatus = ref('add');

    // 商品数量
	let goodsNumber = ref(1);

    userStore.getUserCarData();
    //钩子函数请求数据
    onMounted(async()=>{
    
        let res = await API.getData('/api_goods',{page: parseInt(Math.random()*10+1) , pagesize: 4})
        let even = await API.getData('/api_goods',{goodsId: route.query.goodsId})
        nowGoods.value = even[0];
        // console.log(even)
        // 赋值
        recommend.value = nowGoods.value.lc_recommend[0];
        bannerList.value = even[0].banner;
        ProdcutList.value = even[0].product_banner;
        likeList.value = res;
        
    });

     // 点击加入购物车 | 购买
	let clickAddBuyHandler = (val: string) => {
		// 验证登录状态
		if(!userStore.TOKEN){
			showFailToast('请登录');
			return;
		};
        // 隐藏弹窗
		show.value = true;
        // 设置状态
		nowStatus.value = val;
	};

    // 校验哪个按钮
    let clickConfirmHandler = async (val)=>{
        // 判断状态购买还是加入购物车
        if(val == 'add'){
            if(!userStore.TOKEN){
                showFailToast('加入购物车失败未登录');
                return;
            };
            add()
        }else if(val == 'buy'){
            if(!userStore.TOKEN){
                showFailToast('购买失败未登录');
                return;
            };
            buy()
        }else{
                // 验证加入 购买
            if(nowStatus.value == 'add'){
                add();
            }else if(nowStatus.value == 'buy'){
                buy()
            }
        }

    };

    //加入购物车方法
    async function add(){
        // 请求
        let even = await API.getCarData('/api_cart',{
            status : 'addcart',
            userId : userStore.TOKEN,
            goodsId : route.query.goodsId,
            goodsNumber : goodsNumber.value
        });

        if(even.code != 0){
            showFailToast('加入购物车失败');
            return;
        };
        showSuccessToast('加入购物车成功');
        // 调用购物车数量渲染方法
        userStore.getUserCarData();
        // 隐藏弹窗
        show.value = false;
        
    };
    // 立刻购买方法
    async function buy(){
            // 加入结算清单
            let res = await API.getSettlementData('/api_settlement', {
                    status : 'addsettlement',
                    userId : userStore.TOKEN,
                    goodsId : route.query.goodsId,
                    from : 'product',
                    goodsNumber: goodsNumber.value
                });

                    // console.log(res);
                if(res.code != 0){
                    showFailToast('购买失败');
                    return;
                }
                //跳转到地址
                router.push('/confirmorder');

    }
    // 监听
    watch(()=> route.query.goodsId,async()=>{
        // console.log("111")
        let even = await API.getData('/api_goods',{goodsId: route.query.goodsId})
        nowGoods.value = even[0];
        // console.log(even)
        recommend.value = nowGoods.value.lc_recommend[0];
        bannerList.value = even[0].banner;
        ProdcutList.value = even[0].product_banner;
    });
    
    let productCStyle = ref([]);
    let buyCStyle = ref([]);

    let aver = ref(true)
    // 商品详情
    let productC = (val)=>{
        productCStyle.value={background:'#000',color:'#fff'}
        buyCStyle.value ={background:'#fff',color:'#000'}
        aver.value = true;
    }
    // 购买需知
    let buyC = ()=>{
        productCStyle.value={background:'#fff',color:'#000'}
        buyCStyle.value ={background:'#000',color:'#fff'}

        aver.value = false;
    }

</script>
<style scoped lang="less">
 
    .van-swipe-item{
        height: 390px;
    }
    
    // 商品标题样式
    .text{
        p{
            
            font-size: 20px;
            width: 75%;
        }
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;

        align-items: center;
        div{
            width: 10%;
            img{
                width: 80%;
                
            }
            p{
                font-size: 15px;
            }
        }
    }
    // 商品描述
    .text-com{
        padding: 0 15px;
        p{
            font-size: 15px;
        }
    }

    // 商品价格
    .price{
        padding: 10px 15px;
        font-size: 25px;
        color: #0c79cc;
    }
    //正品保障
    .tan{
        display: flex;
        align-items: center;
        font-size: 15px;
        padding: 0 15px;
        img{
            width: 4%;
            height: 4%;
            margin-right: 5px;
        }
    }
    .sc{
        margin-left: 10px;
    }
    // 商品图片
    .product-banner{
		img{
			width: 100%;
		}
	}

    // 猜你喜欢
    .goods-list{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0px 10px;
    }
   
    // 弹出框内容样式
    .text-action{
        p{
            font-size: 20px;
            width: 100%;
        }
        padding: 10px 15px;
    }
    .content{
        margin-top: 30px;
        margin-bottom:50px ;
    }
    .sum{
        padding: 15px;
    }

    // 购买需知
    .buyproduct{
        width: 100%;
        height: 30px;
        display: flex;
        .product-c{
            width: 50%;
            height: 100%;
            color: white;
            text-align: center;
            line-height: 30px;
            background-color: black;
        }
        .buy-c{
            width: 50%;
            height: 100%;
            color: black;
            text-align: center;
            line-height: 30px;
            background-color: white;
        }
    }

    .Purchasing-notice{
        p{
            font-size: 14px;
            margin: 10px;
        }
    }
</style>
